import Configer from "../../../script/frame/apiModel/config/Configer";
import {SelectItemMap, UIConfigKey} from "../../../script/constant/UIConfig";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, View} from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import MathUtil from "../../../script/frame/codeAdapter/MathUtil";
import {Logger} from "../../../script/frame/apiModel/config/Logger";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {LightButton} from "parasimon/gui/code/component/LightButton";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import {ColorStr} from "../../../script/type/Type";


export enum PageContentType {
    normal,
    circle,
    list,
}

export interface IProp {
    type: PageContentType;
    selectItemMap: SelectItemMap[];
    elementsFun: (selectKey: number) => React.Element<any, any>[];
    onePageNum: number;
    hidden?: boolean;
    closeFun?: () => void;
    desText?: string;
    pos?: { x: number, y: number };
}
export interface IState {
    selectKey: number;
    pageIndex: number;
    maxPage: number;
}

export default class PageContent extends React.Element<IProp, IState> {

    constructor(props: IProps & IProp) {
        super(props);
        const firstType = this.props.selectItemMap[0]?.type;
        this.state = {
            pageIndex: 0,
            maxPage: 1,
            visible: true,
            selectKey: firstType,
        }
    }

    renderNomral = () => {

        const backPos = { x: 0.21875, y: 0.16600 }

        if (this.props.pos?.x) {
            backPos.x = this.props.pos?.x;
        }
        if (this.props.pos?.y) {
            backPos.y = this.props.pos?.y;
        }



        const startIndex = this.props.onePageNum * this.state.pageIndex;
        const endIndex = startIndex + this.props.onePageNum;

        const elements = this.props.elementsFun(this.state.selectKey);

        let showIndex = 0;
        for (let i = 0; i < elements.length; i++) {
            const element = elements[i];
            if (element) {
                if (!element.props?.style?.hidden) {
                    if (showIndex >= startIndex && showIndex < endIndex) {
                    } else {
                        element.props.style.hidden = true;
                    }
                    showIndex = showIndex + 1;
                }
            }
        }

        const pageNum = showIndex / this.props.onePageNum;
        const tempMaxPage = MathUtil.ceil(pageNum);
        if (tempMaxPage > 0) {
            this.state.maxPage = tempMaxPage;
        } else {
            this.state.maxPage = 1
        }

        const leftButton = Configer.getResource(ResourceKey.pageLeftButton);
        const rightButton = Configer.getResource(ResourceKey.pageRightButton);

        const pageMargin = 0.01250;

        let selected: SelectItemMap;

        for (let i = 0; i < this.props.selectItemMap.length; i++) {
            const item = this.props.selectItemMap[i];
            if (item.type === this.state.selectKey) {
                selected = item;
                break;
            }
        }
        const board = Configer.getResource(selected?.board)

        const pageBoard = Configer.getResource(selected.pageFootBack);

        const backSize = { h: selected.boardSize.h, w: selected.boardSize.w };

        const closeIcon: string = Configer.getResource(selected?.closeBack);
        const closeIconSize: { w: number, h: number } = selected.closeSize;
        const closeMargin = selected.closeMargin;

        let closeHidden = true;
        if (this.props.closeFun) {
            closeHidden = false
        }

        const sideBarSize = { h: backSize.h, w: selected.unSelectSize.w + selected.unSelectMargin.l };

        return <View   key={GuiKeys.pageContent} style={{ hidden: this.props.hidden, backgroundImage: board, width: backSize.w, height: backSize.h, top: backPos.y, left: backPos.x }}>
            <View   key={GuiKeys.pageContentSideBar} style={{ width: sideBarSize.w, height: sideBarSize.h }}>
                {
                    this.props.selectItemMap.map(
                        (itemMap, index, array) => {
                            const type = itemMap.type;
                            let selectBlp = Configer.getResource(itemMap.unSelect);
                            if (this.state.selectKey === type) {
                                selectBlp = Configer.getResource(itemMap.select);
                            }
                            const margin = itemMap.unSelectMargin;
                            const size = itemMap.unSelectSize;
                            // if (index === 0) {
                            //     marginT = 0.002
                            // }
                            return <View   key={`${GuiKeys.pageContentSideBarItem}|${index}`} onMouseDown={() => { this.selectKey(type) }} style={{ backgroundImage: selectBlp, width: size.w, height: size.h, marginT: margin.t, marginL: margin.l }}></View>
                        }
                    )
                }
            </View>
            <View   key={GuiKeys.pageContentContent} style={{ width: selected.contentSize.w, height: selected.contentSize.h, paddingT: selected.contentPadding.t, paddingL: selected.contentPadding.l }}>
                {
                    elements.map(
                        (value, index, array) => {
                            return value;
                        }
                    )
                }
            </View>
            <View key={GuiKeys.pageContentFoot} style={{ float: true, marginT: selected.pageFootMargin.t, marginL: selected.pageFootMargin.l, width: backSize.w, height: selected.pageFootSize.h  }}>
                <LightButton   onMouseDown={this.toLastPage} key={GuiKeys.pageContentToLeft} style={{ backgroundImage: leftButton, width: selected.pageFootSize.w, height: selected.pageFootSize.h }}></LightButton>
                <View key={GuiKeys.pageContentPageNum} style={{ backgroundImage: pageBoard, fontSize: 0.015, width: selected.pageFootSize.w, height: selected.pageFootSize.h, marginL: pageMargin, marginR: pageMargin, paddingL: 0.005, paddingT: 0.007, color: ColorStr.black }}>{`${this.state.pageIndex + 1}/${this.state.maxPage}`}</View>
                <LightButton   onMouseDown={this.toNextPage} key={GuiKeys.pageContentToRight} style={{ backgroundImage: rightButton, width: selected.pageFootSize.w, height: selected.pageFootSize.h }}></LightButton>
            </View>
            <View   key={GuiKeys.pageContentDesText} style={{ float: true, marginL: 0.04, marginT: 0.5, width: 0.1, height: 0.1, fontSize: 0.08 }}>{this.props.desText}</View>
            <View   onMouseDown={() => { return this.props.closeFun && this.props.closeFun(); }} key={GuiKeys.pageContentClose} style={{ hidden: closeHidden, float: true, backgroundImage: closeIcon, width: closeIconSize.w, height: closeIconSize.h, marginL: closeMargin.l, marginT: closeMargin.t }}></View>
        </View>;
    }

    renderCircle = () => {
        const backSize = { h: 0.58100, w: 0.43750 };
        const backPos = { x: 0.28125, y: 0.16600 };
        const padding = { l: 0.04750, t: 0.09960 };
        if (this.props.pos?.x) {
            backPos.x = this.props.pos?.x;
        }
        if (this.props.pos?.y) {
            backPos.y = this.props.pos?.y;
        }
        const sideBarSize = { h: backSize.h, w: 0.08125 };

        const startIndex = this.props.onePageNum * this.state.pageIndex;
        const endIndex = startIndex + this.props.onePageNum;


        const elements = this.props.elementsFun(this.state.selectKey);

        const closeIconSize: { w: number, h: number } = Configer.getUIConfig(UIConfigKey.closeIconSize);
        const closeIcon: string = Configer.getResource(ResourceKey.barCloseButton);

        let showIndex = 0;
        for (let i = 0; i < elements.length; i++) {
            const element = elements[i];
            if (element) {
                if (!element.props?.style?.hidden) {
                    if (showIndex >= startIndex && showIndex < endIndex) {
                    } else {
                        element.props.style.hidden = true;
                    }
                    showIndex = showIndex + 1;
                }
            }
        }

        let leftHidden = false;
        let rightHidden = false;

        const pageNum = showIndex / this.props.onePageNum;
        const tempMaxPage = MathUtil.ceil(pageNum);

        if (tempMaxPage > 0) {
            this.state.maxPage = tempMaxPage;
        } else {
            this.state.maxPage = 1
        }

        if (this.state.pageIndex === 0) {
            leftHidden = true;
        }
        if ((this.state.pageIndex + 1) === this.state.maxPage) {
            rightHidden = true;
        }


        const achPadding = { l: 0, t: 0.01660 };
        const footY = 0.46480;
        const middleY = 0.26560;
        const leftRightSize = { h: 0.03320, w: 0.02500 };


        const pageBoard = Configer.getResource(ResourceKey.pageBoard);
        const leftButton = Configer.getResource(ResourceKey.pageLeftButton);
        const rightButton = Configer.getResource(ResourceKey.pageRightButton);


        const itemHeight = 0.03320;
        const itemWidth = 0.05000;
        const itemPadding = 0.03125;
        const upItemMap: SelectItemMap[] = [];
        const downItemMap: SelectItemMap[] = [];


        for (let i = 0; i < this.props.selectItemMap.length; i++) {
            const item = this.props.selectItemMap[i];
            if (item) {
            } else {
                break;
            }
            if (item.direction > 0) {
                upItemMap.push(item)
            } else {
                downItemMap.push(item)
            }
        }

        const fontSize = 0.01328;

        let selected: SelectItemMap;

        for (let i = 0; i < this.props.selectItemMap.length; i++) {
            const item = this.props.selectItemMap[i];
            if (item.type === this.state.selectKey) {
                selected = item;
                break;
            }
        }

        const contentW = backSize.w;

        const backImage = Configer.getResource(selected.board)

        let closeHidden = true;
        if (this.props.closeFun) {
            closeHidden = false
        }


        return <View   key={GuiKeys.pageContent} style={{ hidden: this.props.hidden, width: backSize.w, height: backSize.h, top: backPos.y, left: backPos.x }}>
            <View   key={GuiKeys.pageContentSideBarUp} style={{ width: backSize.w, height: itemHeight, paddingL: itemPadding }}>
                {
                    upItemMap.map(
                        (itemMap, index, array) => {
                            const type = itemMap.type;
                            let selectBlp = Configer.getResource(itemMap.unSelect);
                            if (this.state.selectKey === type) {
                                selectBlp = Configer.getResource(itemMap.select);
                            }
                            if (!CodeUtil.isNullOrZero(selectBlp)) {
                                return <View   key={`${GuiKeys.pageContentSideBarUpItem}|${index}`} onMouseDown={() => { this.selectKey(type) }} style={{ backgroundImage: selectBlp, width: itemWidth, height: itemHeight, marginL: itemPadding / 2 }}></View>
                            } else {
                                return <View   key={`${GuiKeys.pageContentSideBarUpItem}|${index}`} style={{ hidden: true }}></View>
                            }
                        }
                    )
                }
            </View>
            <View   key={GuiKeys.pageContentFoot} style={{ backgroundImage: pageBoard, float: true, marginT: footY, marginL: 0.43125, width: 0.05000, height: 0.06640  }}>
                <View    key={GuiKeys.pageContentPageNum} style={{ fontSize: 0.01660, width: 0.05000, height: 0.06640, marginL: 0.01250, marginT: 0.01909 }}>{`${this.state.pageIndex + 1}/${this.state.maxPage}`}</View>
            </View>
            <View   key={GuiKeys.pageContentContent} style={{ backgroundImage: backImage, width: contentW, height: sideBarSize.h - itemHeight * 2, paddingT: padding.t, paddingL: padding.l, paddingR: padding.l }}>
                {
                    elements.map(
                        (value, index, array) => {
                            return value;
                        }
                    )
                }
            </View>
            <View   key={GuiKeys.pageContentSideBarDown} style={{ width: backSize.w, height: itemHeight, paddingL: itemPadding }}>
                {
                    downItemMap.map(
                        (itemMap, index, array) => {
                            const type = itemMap.type;
                            let selectBlp = Configer.getResource(itemMap.unSelect);
                            if (this.state.selectKey === type) {
                                selectBlp = Configer.getResource(itemMap.select);
                            }
                            if (!CodeUtil.isNullOrZero(selectBlp)) {
                                return <View   key={`${GuiKeys.pageContentSideBarDownItem}|${index}`} onMouseDown={() => { this.selectKey(type) }} style={{ backgroundImage: selectBlp, width: itemWidth, height: itemHeight, marginL: itemPadding / 2 }}></View>
                            } else {
                                return <View   key={`${GuiKeys.pageContentSideBarDownItem}|${index}`} style={{ hidden: true }}></View>
                            }
                        }
                    )
                }
            </View>
            <LightButton   onMouseDown={this.toLastPage} key={GuiKeys.pageContentToLeft} style={{ float: true, hidden: leftHidden, marginL: 0.02500, marginT: middleY, backgroundImage: leftButton, width: leftRightSize.w, height: leftRightSize.h }}></LightButton>
            <LightButton   onMouseDown={this.toNextPage} key={GuiKeys.pageContentToRight} style={{ float: true, hidden: rightHidden, marginL: 0.38750, marginT: middleY, backgroundImage: rightButton, width: leftRightSize.w, height: leftRightSize.h }}></LightButton>
            <View   key={GuiKeys.pageContentDesText} style={{ float: true, marginL: 0.06250, marginT: footY, width: 0.06250, height: 0.01660, fontSize: fontSize }}>{this.props.desText}</View>

            <View   onMouseDown={() => { return this.props.closeFun(); }} key={GuiKeys.pageContentClose} style={{ hidden: closeHidden, float: true, backgroundImage: closeIcon, width: closeIconSize.w, height: closeIconSize.h, marginL: backSize.w - closeIconSize.w, marginT: achPadding.t }}></View>
        </View>;
    }


    renderList = () => {

        const backPos = { x: 0.21875, y: 0.16600 }

        const startIndex = this.props.onePageNum * this.state.pageIndex;
        const endIndex = startIndex + this.props.onePageNum;

        const elements = this.props.elementsFun(this.state.selectKey);

        let showIndex = 0;
        for (let i = 0; i < elements.length; i++) {
            const element = elements[i];
            if (element) {
                if (!element.props?.style?.hidden) {
                    if (showIndex >= startIndex && showIndex < endIndex) {
                    } else {
                        element.props.style.hidden = true;
                    }
                    showIndex = showIndex + 1;
                }
            }
        }

        const pageNum = showIndex / this.props.onePageNum;
        const tempMaxPage = MathUtil.ceil(pageNum);
        if (tempMaxPage > 0) {
            this.state.maxPage = tempMaxPage;
        } else {
            this.state.maxPage = 1
        }

        const leftButton = Configer.getResource(ResourceKey.handBookLeftButton);
        const rightButton = Configer.getResource(ResourceKey.handBookRightButton);

        let selected: SelectItemMap;

        for (let i = 0; i < this.props.selectItemMap.length; i++) {
            const item = this.props.selectItemMap[i];
            if (item.type === this.state.selectKey) {
                selected = item;
                break;
            }
        }
        const board = Configer.getResource(selected?.board)

        const pageBoard = Configer.getResource(selected.pageFootBack);

        const backSize = { h: selected.boardSize.h, w: selected.boardSize.w };

        const closeIcon: string = Configer.getResource(selected?.closeBack);
        const closeIconSize: { w: number, h: number } = selected.closeSize;
        const closeMargin = selected.closeMargin;

        let closeHidden = true;
        if (this.props.closeFun) {
            closeHidden = false
        }

        const sideBarSize = { h: backSize.h, w: selected.unSelectSize.w + selected.unSelectMargin.l };


        return <View   key={GuiKeys.pageContent} style={{ hidden: this.props.hidden, backgroundImage: board, width: backSize.w, height: backSize.h, top: backPos.y, left: backPos.x }}>
            <View   key={GuiKeys.pageContentSideBar} style={{ width: sideBarSize.w, height: sideBarSize.h }}>
                {
                    this.props.selectItemMap.map(
                        (itemMap, index, array) => {
                            const type = itemMap.type;
                            let selectBlp = Configer.getResource(itemMap.unSelect);
                            if (this.state.selectKey === type) {
                                selectBlp = Configer.getResource(itemMap.select);
                            }
                            const margin = itemMap.unSelectMargin;
                            const size = itemMap.unSelectSize;
                            // if (index === 0) {
                            //     marginT = 0.002
                            // }
                            return <View   key={`${GuiKeys.pageContentSideBarItem}|${index}`} onMouseDown={() => { this.selectKey(type) }} style={{ backgroundImage: selectBlp, width: size.w, height: size.h, marginT: margin.t, marginL: margin.l }}></View>
                        }
                    )
                }
            </View>
            <View   key={GuiKeys.pageContentContent} style={{ width: selected.contentSize.w, height: selected.contentSize.h, paddingT: selected.contentPadding.t, paddingL: selected.contentPadding.l }}>
                {
                    elements.map(
                        (value, index, array) => {
                            return value;
                        }
                    )
                }
            </View>
            <LightButton   onMouseDown={this.toLastPage} key={GuiKeys.pageContentToLeft} style={{ backgroundImage: leftButton, width: selected.pageFootSize.w, height: selected.pageFootSize.h, float: true, marginL: 0.06 }}></LightButton>
            <LightButton   onMouseDown={this.toNextPage} key={GuiKeys.pageContentToRight} style={{ backgroundImage: rightButton, width: selected.pageFootSize.w, height: selected.pageFootSize.h, float: true, marginL: 0.64 }}></LightButton>

            <View   key={GuiKeys.pageContentDesText} style={{ float: true, marginL: 0.02, marginT: 0.385, width: 0.06250, height: 0.01660, fontSize: 0.013, color: ColorStr.black }}>{this.props.desText}</View>
            <View   onMouseDown={() => { return this.props.closeFun && this.props.closeFun(); }} key={GuiKeys.pageContentClose} style={{ hidden: closeHidden, float: true, backgroundImage: closeIcon, width: closeIconSize.w, height: closeIconSize.h, marginL: closeMargin.l, marginT: closeMargin.t }}></View>
        </View>;
    }

    render = () => {
        if (this.props.type === PageContentType.normal) {
            return this.renderNomral();
        } else if (this.props.type === PageContentType.circle) {
            return this.renderCircle();
        } else if (this.props.type === PageContentType.list) {
            return this.renderList();
        }
    }

    getVisible = (): boolean => {
        return this.state.visible;
    }

    toNextPage = () => {
        if (this.state.pageIndex + 1 >= this.state.maxPage) {
            Logger.toastProduct('当前已经是最后一页', PlayerFactory.getInstance().getLocalPlayer())
            return;
        }
        this.setState({
            ...this.state,
            pageIndex: this.state.pageIndex + 1,
        })
    }

    toLastPage = () => {
        if (this.state.pageIndex - 1 < 0) {
            Logger.toastProduct('当前已经是第一页', PlayerFactory.getInstance().getLocalPlayer())
            return;
        }
        this.setState({
            ...this.state,
            pageIndex: this.state.pageIndex - 1,
        })
    }

    selectKey = (selectKey: number) => {
        this.setState({
            ...this.state,
            pageIndex: 0,
            selectKey: selectKey,
        })
    }
}